<template>
  <div class="carousel-area">
    <div @click="scrollleft" class="button btn-left" :style="{ 'opacity': scrollbar.scrollleft ? 1 : 0.2 }" />
    <div id="VmusicCarousel" class="carousel">
      <!-- 轮播内容 -->
      <section class="carousel-main" ref="carouselRef">
        <Swiper 
          :modules="modules"
          ref="carouselRef"
          :autoplay="modelValue.length>=3"
          :speed="400"
          :loop="true"
          :looped-slides="modelValue.length>=3?3:modelValue.length==2?2:1"
          :loopAdditionalSlides="0"
          :slides-per-view="modelValue.length>=3?3:modelValue.length==2?2:1"
          :space-between="10"
    
    
        >
          <swiper-slide v-for="(item, index) in modelValue" :key="index">
            <div class="carousel-main-panel">
              <header><b /> IP：{{item.ip}}</header>
              <dl>
                <dt class="title">
                  <span>内存</span>
                  <span>{{(item.memoryUsage * 100).toFixed(0)}}%</span>
                </dt>
                <dd>
                  <p><span v-for="num in 10" :key="num" /></p>
                  <div :style="{'width': ((item.memoryWidth-1)+'%')}"></div>
                </dd>
                <dt class="desc">已使用{{(item.memoryUsed).toFixed(1)}}GB/总{{item.memoryTotal}}GB</dt>
              </dl>
              <dl>
                <dt class="title">
                  <span>CPU负载</span>
                  <span>{{item.cpuUsage.toFixed(0) * 100}}%</span>
                </dt>
                <dd>
                  <p><span v-for="num in 10" :key="num" /></p>
                  <div :style="{'width': (item.cpuWidth-1+'%')}"></div>
                </dd>
              </dl>
              <dl>
                <dt class="title">
                  <span>存储空间</span>
                  <span>{{item.diskUsage * 100}}%</span>
                </dt>
                <dd>
                  <p><span v-for="num in 10" :key="num" /></p>
                  <div :style="{'width': (item.diskWidth-1+'%')}"></div>
                </dd>
                <dt class="desc">已使用{{(item.diskTotal -item.diskFree).toFixed(1)}}GB/总{{item.diskTotal}}GB</dt>
              </dl>
            </div>
          </swiper-slide>
        </Swiper>
      </section>
      <!-- 轮播内容结束 -->
    </div>
    <div :style="{ 'opacity': scrollbar.scrollright ? 1 : 0.2 }" @click="scrollright" class="button btn-right" />
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import  { Autoplay } from 'swiper'

// import swiper module styles
import "swiper/scss";
import 'swiper/css/navigation'
export default {
  name: 'Carousel',
  components: { Swiper, SwiperSlide },
  props: {
    modelValue: { 
      type: Array,
      default: () => []
    },
  },
  setup(props) {

  
   
    const scrollbar = reactive({
      scrollright: true,
      scrollleft:false
    })
  
    let carouselRef = ref(null)
  
      const setSwiperRef = (swiper = carouselRef) => {
        carouselRef.value = swiper
      }

      const handleResize = () => {
        carouselRef.value?.changeDirection(window.innerWidth <= 960 ? 'vertical' : 'horizontal')
      }
 
      watch(() => props.modelValue, (val) => {
        if(val.length<4){
          scrollbar.scrollright = false
          scrollbar.scrollleft = false
        }
      })
      
      
    return {

      carouselRef,
      scrollbar,
      modules: [Autoplay],
      setSwiperRef,
      handleResize
    }
  }
}
</script>


<style lang="scss" scoped>
@import './style.scss';
</style>